<!-- 司机详情 -->
<template>
  <div
    class="dashboard-container driver-detail"
    :class="isShow ? 'isShow' : 'quxiao'"
  >
    <div class="div">
      <el-tabs
        v-model="activeName"
        style="margin: 20px;"
        @tab-click="driverClick"
      >
        <!-- 基本信息 -->
        <el-tab-pane
          label="基本信息"
          name="first"
        >
          <el-row>
            <el-col
              :span="8"
              style="display: flex;align-items: center;"
            >
              <span style="width:25%;">员工编号：</span>
              <el-input
                v-model="driverDetailsList.userId"
                :disabled="true"
                type="text"
                style="width: 70%;"
              >
              </el-input>
            </el-col>
            <el-col
              :span="8"
              style="display: flex; align-items: center;"
            >
              <span style="width:25%;">司机名称：</span>
              <el-input
                v-model="driverDetailsList.name"
                :disabled="true"
                style="width: 70%;"
              >
              </el-input></el-col>
            <el-col
              :span="8"
              style="display: flex; align-items: center;"
            >
              <span style="width:25%;">所属机构：</span>
              <el-input
                v-model="driverDetailsList.agency"
                :disabled="true"
                style="width: 70%;"
              >
              </el-input></el-col>
          </el-row>
          <el-row style="margin-top: 20px;">
            <el-col
              :span="8"
              style="display: flex; align-items: center;"
            >
              <span style="width:25%;">电话：</span>
              <el-input
                v-model="driverDetailsList.mobile"
                :disabled="true"
                style="width: 70%;"
              >
              </el-input></el-col>
            <el-col
              :span="8"
              style="display: flex; align-items: center;"
            ><span style="width:25%;">年龄：</span><el-input
              v-model="driverDetailsList.age"
              :disabled="disabled"
              style="width: 70%;"
            >
            </el-input></el-col>
          </el-row>

        </el-tab-pane>
        <!-- 驾驶证信息 -->
        <el-tab-pane
          label="驾驶证信息"
          name="second"
          style="margin: 20px;"
        >
          <el-row>
            <el-col
              :span="8"
              style="display: flex; align-items: center;"
            ><span style="width:35%;">驾驶证号：</span><el-input
              v-model="driverLicenseList.licenseNumber"
              :disabled="disabled"
              style="width: 60%;"
            >
            </el-input></el-col>
            <el-col
              :span="8"
              style="display: flex; align-items: center;"
            ><span style="width:35%;">准驾车型：</span><el-input
              v-model="driverLicenseList.licenseType"
              :disabled="disabled"
              style="width: 60%;"
            >
            </el-input></el-col>
            <el-col
              :span="8"
              style="display: flex; align-items: center;"
            ><span style="width:35%;">初次领证日期：</span><el-input
              v-model="driverLicenseList.initialCertificateDate"
              :disabled="disabled"
              style="width: 60%;"
            >
            </el-input></el-col>
          </el-row>
          <el-row style="margin-top: 20px;">
            <el-col
              :span="8"
              style="display: flex; align-items: center;"
            ><span
              style="width:35%;"
            >驾驶证有效期限：</span><el-input
              v-model="driverLicenseList.validPeriod"
              :disabled="disabled"
              style="width: 60%;"
            >
            </el-input></el-col>
            <el-col
              :span="8"
              style="display: flex; align-items: center;"
            ><span style="width:35%;">驾龄：</span><el-input
              v-model="driverLicenseList.driverAge"
              :disabled="disabled"
              style="width: 60%;"
            >
            </el-input></el-col>
            <el-col
              :span="8"
              style="display: flex; align-items: center;"
            ><span style="width:35%;">驾驶证类型：</span><el-input
              v-model="driverLicenseList.allowableType"
              :disabled="disabled"
              style="width: 60%;"
            >
            </el-input></el-col>
          </el-row>
          <el-row style="margin-top: 20px;">
            <el-col
              :span="8"
              style="display: flex; align-items: center;"
            ><span style="width:35%;">从业资格证：</span><el-input
              v-model="driverLicenseList.qualificationCertificate"
              :disabled="disabled"
              style="width: 60%;"
            >
            </el-input></el-col>
            <el-col
              :span="8"
              style="display: flex; align-items: center;"
            ><span style="width:35%;">入场证信息：</span><el-input
              v-model="driverLicenseList.passCertificate"
              :disabled="disabled"
              style="width: 60%;"
            >
            </el-input></el-col>
          </el-row>
          <el-row style="margin-top: 20px;">
            <!-- 图片信息 -->
            <el-col style="display: flex;">
              <el-upload
                list-type="picture-card"
                :file-list="fileList"
                action="#"
                :auto-upload="false"
                :on-preview="driverPictureCardPreview"
                :on-remove="driverRemove"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img
                  width="100%"
                  :src="dialogImageUrl"
                  alt=""
                >
              </el-dialog>
            </el-col>
          </el-row>

        </el-tab-pane>

        <div class="btn">
          <el-button
            v-if="flag === true"
            id="editButton"
            type="danger"
            @click="editShowHide"
          >编辑</el-button>
          <div v-else-if="flag === false">
            <el-button
              type="danger"
              @click="saveShowHide"
            >保存</el-button>
            <el-button @click="cancelShowHide">取消</el-button>
          </div>
        </div>

      </el-tabs>
    </div>
  </div>
</template>
<script>
import { driverDetail, driverLicenseDetail, driverDetailUpdate, driverLicenseDetailUpdate, imgUpload } from '@/api/transit'
export default {
  data() {
    return {
      driverDetailsList: [], // 基本信息
      driverLicenseList: [], // 驾驶证信息
      dialogImageUrl: '',
      dialogVisible: false,
      imageUrl: '',
      activeName: 'first',
      isShow: true, // input输入框显示与隐藏
      flag: true, // 按钮显示与隐藏
      disabled: true, // input输入框是否禁用
      // 更新基本信息
      driverData: {
        age: 0,
        agency: '',
        mobile: '',
        name: '',
        userId: 0
      },
      // 更新驾驶证信息
      steerData: {
        allowableType: '',
        driverAge: 0,
        id: 0,
        initialCertificateDate: '',
        licenseNumber: '',
        licenseType: '',
        passCertificate: '',
        picture: '',
        qualificationCertificate: '',
        userId: 0,
        validPeriod: ''
      },
      fileList: []
    }
  },
  created() {
    this.getDriverDetails()
    this.getDriverLicense()
  },
  methods: {
    // 司机数据详情
    async getDriverDetails() {
      const id = this.$route.query.id
      const res = await driverDetail(id)
      console.log('数据', res)
      this.driverDetailsList = res.data
      this.driverDetailsList.agency = res.data.agency.name
      // console.log('driverDetailsList', this.driverDetailsList)
    },
    // 驾驶证数据详情
    async getDriverLicense() {
      const id = this.$route.query.id
      const res = await driverLicenseDetail(id)
      console.log('驾驶证', res)
      this.driverLicenseList = res.data
      // console.log(res.data.picture)

      // 把图片以,分隔
      const img = res.data.picture.split(',')
      console.log('img', img)
      // 回显图片
      img.forEach(item => {
        this.fileList.push({
          url: item
        })
      })
    },
    // 编辑的显示与隐藏
    editShowHide() {
      this.isShow = !this.isShow
      this.flag = !this.flag
      this.disabled = !this.disabled
    },
    // 取消的显示与隐藏
    cancelShowHide() {
      this.isShow = !this.isShow
      this.flag = !this.flag
      this.disabled = !this.disabled
      this.$message('取消')
    },
    // 保存
    async saveShowHide() {
      if (this.activeName === 'first') {
        // console.log(1)
        try {
          const id = this.$route.query.id
          await driverDetailUpdate(id, this.driverDetailsList)
          this.isShow = !this.isShow
          this.flag = !this.flag
          this.disabled = !this.disabled
        } catch (error) {
          console.dir(error)
        }
      }
      if (this.activeName === 'second') {
        try {
          await driverLicenseDetailUpdate(this.steerData)
          this.isShow = !this.isShow
          this.flag = !this.flag
          this.disabled = !this.disabled
        } catch (error) {
          console.dir(error)
        }
        this.$message.success('添加成功')
      }
    },
    // 上传图片
    driverRemove(file, fileItem) {
      console.log('图片信息', file, fileItem)
    },
    driverPictureCardPreview(file) {
      console.log(file, '上传的文件信息')
      this.dialogImageUrl = file.url
      console.log('this.dialogImageUrl', this.dialogImageUrl)
      // this.dialogVisible = true
    },
    handleDownload(file) {
      console.log('文件', file)
    },
    async handleAvatarSuccess(file) {
      this.imageUrl = await imgUpload(file)
      console.log('this.imageUrl', this.imageUrl)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpg'
      const isLt2M = file.size / 1024 / 1024 < 5

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
      }
      return isJPG && isLt2M
    },
    // 点击切换
    driverClick() {
      // console.log(basic, steerThe)
      if (this.activeName === 'first' || this.activeName === 'second') {
        this.isShow = true
        this.flag = true
        this.disabled = true
      }
    }

  }
}
</script>
<style lang="scss" scoped>
.div {
  background-color: #fff;
  margin: 20px;
  border-radius: 2px;
  padding-left: 30px;
  padding-right: 30px;
  padding-top: 10px;
  height: 600px;
  margin-bottom: 20px;

}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;

}

.isShow {

  // 隐藏input输入框
  ::v-deep .el-input__inner {
    border: 0;
    background-color: #fff !important;
  }
}

.btn {
  text-align: center;
}
</style>
